.step-graph{
    width:100%;
}

.step-graph .step{
    position:relative;

    float:left;
}

.step-graph .step span{
    display:block;

    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width:100px;
    height:100px;
    margin-right:100px;
    margin-left:100px;

    text-align:center;

    color:#ccc;
    border-width:10px;
    border-style:solid;
    border-radius:50%;

    font-size:20px;
    line-height:80px;
}

.step-graph .step:before{
    position:absolute;
    top:45px;
    left:0;

    display:block;

    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width:100px;
    height:10px;

    content:" ";
}

.step-graph .step:after{
    position:absolute;
    top:45px;
    right:0;

    display:block;

    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width:100px;
    height:10px;

    content:" ";
}

.step-graph .step:first-child::before,
.step-graph .step:last-child::after{
    width:0;
}

.step-graph .step:before,
.step-graph .step:after{
    background-color:#999;
}

.step-graph .step span{
    border-color:#999;
}

.step-graph .step.active:before,
.step-graph .step.active:after{
    background-color:rgb(82, 147, 196);
}

.step-graph .step.active span{
    color:rgb(82, 147, 196);
    border-color:rgb(82, 147, 196);
}
